<template>
  <div class="container">
    <!-- 左边模块 -->
    <div class="menus_wrapper">
      <LeftColumn />
    </div>

    <!-- 中间模块 -->
    <div class="post_wrapper">
      <!-- 搜索框 -->
      <div class="search_wrapper">
        <el-input
          @keyup.enter="getPosts"
          placeholder="请输入城市，比如长沙"
          v-model="searchParams.city"
          clearable
        >
        </el-input>
        <el-button
          class="searchBtn"
          type="primary"
          icon="el-icon-search"
          @click="getPosts(searchParams)"
          >搜索</el-button
        >
        <!-- 写文章 -->
        <router-link :to="{ path: '/post/create' }">
          <el-button
            class="writeBtn"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
        </router-link>
      </div>
      <!-- 文章卡片 -->
      <PostCard :postList="postList" />
      <!-- 分页栏 -->
      <Pagination
        :data="totalList"
        :count="totalList.length"
        :pages="pages"
        :searchParams="searchParams"
        @doSearch="getPosts($event)"
      />
    </div>

    <!-- 右边模块 -->
    <!-- 公告 -->
    <div class="notice">
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-s-promotion"></i> 站点公告</span>
          哈哈哈，法律是人性的约束，请各位文明上网.
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"
            ><i class="el-icon-s-opportunity"></i> 搜索技巧</span
          >
          输入城市
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// 引入左边栏目页
import LeftColumn from "@/components/post/leftColumn";
// 文章卡片
import PostCard from "@/components/post/postCard";
// 分页组件
import Pagination from "@/components/pagination";

export default {
  // 注册
  components: {
    LeftColumn,
    PostCard,
    Pagination
  },
  data() {
    return {
      // 文章总数组
      totalList: [],
      // 当前页展示的文章数组
      postList: [],
      // 搜索参数
      searchParams: {
        city: "",
        page: 0,
        limit: 3
      },
      pages: [3, 5, 10, 15, 20]
    };
  },

  mounted() {
    // 搜索
    this.getPosts(this.searchParams);
  },

  methods: {
    getPosts({ city, page, limit }) {
      var url = "";
      if (city.length > 0) {
        url = `/posts?city=${city}`;
      } else {
        url = "/posts";
      }
      var that = this;
      this.$axios({
        url,
        method: "GET"
      }).then(res => {
        console.log(res);
        that.totalList = res.data.data.reverse();
        that.postList = res.data.data;
        // 分页处理
        let start = page * limit;
        let end = start + limit;
        that.postList = that.totalList.slice(start, end);
        console.log(this.postList);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1100px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  // background-color: #f4f5f5;
}

.post_wrapper {
  // display: flex;
  margin-left: 50px;
  width: 800px;
  .el-input {
    width: 230px;
  }
  .searchBtn {
    height: 38px;
    width: 100px;
    margin: 0 0 0 20px;
  }
  .writeBtn {
    height: 40px;
    width: 40px;
    position: relative;
    left: 10px;
  }
}

.notice {
  width: 500px;
  height: 500px;
  position: sticky;
  top: 20px;
  right: 50px;
}

.search_wrapper {
  // margin-left: 20px;
  display: flex;
  height: 50px;
}
</style>
